﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .box{
            width:250px;
            box-shadow:0px 0px 5px blue;
            border-radius:10px;
            text-align:center;
            position:relative;
            float:left;
            margin:5px;
        }
        .box-image{
            height:200px;
            max-width:96%;
            margin:10px 0px;
        }
        .box-price{
            position:absolute;
            bottom:5px;
            left:5px;
        }
        .box-actions {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width:25px;
        }
        .box-icon {
            position: absolute;
            top: 0px;
            right: 0px;
        }
        .box:hover {
            box-shadow: 0px 0px 10px red;
        }
    </style>
</head>
<body>
    <div class="box">
        <img class="box-icon" src="Images/others/new_animated.gif" />
        <img class="box-image" src="Images/products/1011.jpg" />
        <div class="box-price">100 USD</div>
        <div class="box-actions">
            <img src="Images/icons/Add%20to%20basket.png" />
            <img src="Images/icons/Heart.png" />
            <img src="Images/icons/Letter.png" />
        </div>
    </div>

    <div class="box">
        <img class="box-icon" src="Images/others/new_animated.gif" />
        <img class="box-image" src="Images/products/1011.jpg" />
        <div class="box-price">100 USD</div>
        <div class="box-actions">
            <img src="Images/icons/Add%20to%20basket.png" />
            <img src="Images/icons/Heart.png" />
            <img src="Images/icons/Letter.png" />
        </div>
    </div>

    <div class="box">
        <img class="box-icon" src="Images/others/new_animated.gif" />
        <img class="box-image" src="Images/products/1011.jpg" />
        <div class="box-price">100 USD</div>
        <div class="box-actions">
            <img src="Images/icons/Add%20to%20basket.png" />
            <img src="Images/icons/Heart.png" />
            <img src="Images/icons/Letter.png" />
        </div>
    </div>

    <div class="box">
        <img class="box-icon" src="Images/others/new_animated.gif" />
        <img class="box-image" src="Images/products/1011.jpg" />
        <div class="box-price">100 USD</div>
        <div class="box-actions">
            <img src="Images/icons/Add%20to%20basket.png" />
            <img src="Images/icons/Heart.png" />
            <img src="Images/icons/Letter.png" />
        </div>
    </div>
</body>
</html>
